<template>
	<div>
		<el-row>
			<el-col :span="24" class="goods">
				<el-card :body-style="{ padding: '10px' }" v-for="(item, index) in goodsList" :key="index">
					<img :src=" api_url + item.goods_imgs[0] " class="image">
					<div style="padding: 14px;">
						<span class="goods_name">{{ item.goods_name }}</span>
						<div class="bottom clearfix">
							<span class="msg_price">{{ item.goods_msg_price }}</span>
							<span class="price">{{ item.goods_price }}</span>
						</div>
						<div class="bottom">
							<span class="time">{{ item.add_time | dataFormat }}</span>
							<span class="time">已售{{ item.sales_volume }}</span>
							<span class="price">x{{ item.goods_number }}</span>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		props: ['storegoods'],
		data() {
			return {
				api_url: this.$api_url,
				goodsList: []
			}
		},
		created() {
		},
		mounted() {
			// console.log('goods', this.storegoods);
			this.getGoodsList(this.storegoods)
		},
		methods: {
			async getGoodsList(storegoods) {
				const { data: res } = await this.$http.get('goods', { params: {_id: storegoods} });
				console.log('goods', res);
				// return;
				if (res.code !== 200) return this.$message.error(res.msg)
				this.$message.success(res.msg)
				this.goodsList = res.data.data;
			},
		}
	}
</script>

<style lang="less" scoped>
	.goods {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		// justify-content: flex-start;
	}
	
	.el-card {
		// width: 300px;
		margin: 5px;
		width: calc(100%/4 - 10px);
		box-sizing: border-box;
	}
	
	.goods_name {
		display: block;
		height: 80px;
		font-weight: bold;
	}

	.bottom {
		margin-top: 20px;
		line-height: 12px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:after {
		clear: both
	}
	
	.msg_price {
		color: red;
		font-size: 18px;
		font-weight: bold;
	}
	.price {
		font-size: 15px;
		color: #9e9e9e;
	}
	
	.time {
    font-size: 13px;
    color: #999;
  }
</style>
